import { Link, useNavigate, useParams } from 'react-router-dom';
import './styles.scss'
import { useState } from 'react';
import useRequest from '../../hooks/useRequest';
import { ResponseType } from './types';

// 默认请求数据
const defaultRequestData = {
  url: '/hostSeachList.json',
  method: 'GET',
  params: {
    shopId: ''
  }
}

const Search = () => {
  const localSearchList = localStorage.getItem('search-list');
  const searchListHistory: string[] = localSearchList ? JSON.parse(localSearchList) : [];

  const [keyword, setKeyword] = useState('')
  const [historyList, setHistoryList] = useState(searchListHistory)
  const navigate = useNavigate()

  const params = useParams<{ shopId: string }>()
  if (params.shopId) {
    defaultRequestData.params.shopId = params.shopId
  }

  const { data } = useRequest<ResponseType>(defaultRequestData);
  const hotList = data?.data || []
  function handleKeyDown(key: string) {
    if (key.toUpperCase() === 'ENTER' && keyword) {
      const newHistoryList = [...historyList]
      newHistoryList.unshift(keyword)
      if (newHistoryList.length > 20) newHistoryList.length = 20
      const filterList: string[] = Array.from(new Set(newHistoryList))
      setHistoryList(filterList)
      localStorage.setItem('search-list', JSON.stringify(filterList))
      navigate(`/searchList/${params.shopId}/${keyword}`)
      setKeyword('')
    }
  }
  function handleHistoryClear() {
    setHistoryList([])
    localStorage.removeItem('search-list')
  }

  const handleKeywordClick = (keyword: string) => {
    navigate(`/searchList/${params.shopId}/${keyword}`)
  }
  return (
    <div className='page search-page'>
      <div className="search">
        <Link to='/home' className='search-back-link'>
          <div className="search-back-icon iconfont">&#xe697;</div>
        </Link>

        <div className="search-area">
          <div className="search-icon iconfont">&#xe62e;</div>
          <input
            className='search-input'
            placeholder='请输入商品名称'
            value={keyword}
            onChange={(e) => { setKeyword(e.target.value) }}
            onKeyDown={(e) => { handleKeyDown(e.key) }}
          />
        </div>
      </div>
      {
        historyList.length ? (
          <>
            <div className="title">
              历史搜索
              <div className='iconfont title-close' onClick={handleHistoryClear}>&#xe66f;</div>
            </div>
            <ul className="list">
              {
                historyList.map((item, index) => {
                  return (
                    <li
                      className='list-item'
                      key={item + index}
                      onClick={() => { handleKeywordClick(item) }}
                    >{item}</li>)
                })
              }
            </ul>
          </>
        ) : null
      }
      {
        hotList.length ? (
          <>
            <div className='title'>
              热门搜索
            </div>
            <ul className='list'>
              {
                hotList.map(item => {
                  return (
                    <li
                      className='list-item'
                      key={item.id}
                      onClick={() => { handleKeywordClick(item.keyword) }}
                    > {item.keyword}</li>)
                })
              }
            </ul>
          </>
        ) : null
      }
    </div>
  )
}

export default Search;